<template>
  <div id="type">
    <div class="back">
      <div class="back-content"
           @click="$router.back()">
        <a-icon type="left" />
        <span>返回</span>
      </div>

      <div class="oprate-wrap">
        <a-button type="primary"
                  class="ele"
                  @click="modalVisible = true"> 创建 </a-button>
      </div>
    </div>

    <!-- 列表 -->
    <a-table :columns="columns"
             :data-source="data"
             class="table-wrap"
             :pagination="false">
      <div slot="type"
           slot-scope="text">
        <a-tag color="#f24a53">
          {{ text }}
        </a-tag>
      </div>
      <div slot="create_time"
           slot-scope="text">
        <a-tag color="#fe234a">{{ timestampToDate(text) }}</a-tag>
      </div>
      <div slot="operation"
           slot-scope="text, record">
        <a-tag color="#f50">
          <a-popconfirm title="真的要删除吗"
                        @confirm="handleDelete(record)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </a-tag>
      </div>
    </a-table>

    <!-- 创建框 -->
    <a-modal title="创建类型"
             :visible="modalVisible"
             :confirm-loading="confirmLoading"
             @ok="handleOk"
             @cancel="modalVisible = false"
             :bodyStyle="{ minHeight: '200px' }">
      <a-form-model :model="form"
                    :label-col="{ span: 4 }"
                    :wrapper-col="{ span: 14 }">
        <a-form-model-item label="类型">
          <a-input v-model="form.type" />
        </a-form-model-item>
        <a-form-model-item label="权重">
          <a-slider v-model="form.sort"
                    :min="0"
                    :max="20" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      columns,
      modalVisible: false, // 创建的框显示
      confirmLoading: false, // 点击的时候控制是否需要loading
      form: {
        type: '',
        sort: 0,
      },
    }
  },
  created() {
    // 获取type
    this.getType()
  },
  methods: {
    // 获取type
    getType() {
      this.$api.getType().then((res) => {
        this.data = res.data
      })
    },
    // 点击ok
    handleOk() {
      this.confirmLoading = true
      this.$api
        .setType(this.form)
        .then((res) => {
          if (res.code === 1) {
            this.$message.success('创建成功')
            this.getType()
            this.modalVisible = false
            this.confirmLoading = false
          } else {
            this.confirmLoading = false
          }
        })
        .catch(() => {
          this.confirmLoading = false
        })
    },
    handleDelete(item) {
      this.$api.delateType({ id: item.id }).then((res) => {
        if (res.code === 1) {
          this.$message.success('删除成功')
          this.getType()
        }
      })
    },
  },
}

const columns = [
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time',
    scopedSlots: {
      customRender: 'create_time',
    },
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    scopedSlots: {
      customRender: 'type',
    },
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'operation',
    },
  },
]
</script>

<style lang="less" scoped>
</style>